iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
Mobile Development

30天零負擔輕鬆學會製作APP介面及設計系列 第 16

30天零負擔輕鬆學會製作APP介面及設計【DAY 16】

  • 分享至 

  • xImage
  •  

大家好,我是YIYI,今天我要來製作到目前為止所有頁面放入MARVEL APP做DEMO。

進入MARVELAPP

首先,進入登入好的APP頁面,將所有頁面放入並點選PHOTOTYPE。
https://ithelp.ithome.com.tw/upload/images/20210925/20140979CukiBPfbr1.pnghttps://ithelp.ithome.com.tw/upload/images/20210925/20140979qWNSE2wlzw.png
進入頁面後在COVER頁面點選TIME,並將秒數調至3秒。
這邊的3秒指的是進入這邊3秒後自動跳轉到下一個頁面。
https://ithelp.ithome.com.tw/upload/images/20210925/20140979apipdUiKAV.png
再來將跳轉頁面指定到HOMEPAGE~
我將所有icon的主頁都是設定到這個頁面~
https://ithelp.ithome.com.tw/upload/images/20210925/201409792UjTFDR3vW.png
接下來順著一頁一頁將所有頁面設定好~
這邊是預設HOMEPAGE跳轉到TODAY頁面的設定。
https://ithelp.ithome.com.tw/upload/images/20210925/20140979wFmpdXTLFZ.png
這邊是預設HOMEPAGE跳轉到MONTH頁面的設定。
https://ithelp.ithome.com.tw/upload/images/20210925/20140979qZHnUr7adq.png
這邊是下排ICON跳轉到日記頁面的設定。
https://ithelp.ithome.com.tw/upload/images/20210925/20140979F3fT1ZZ6RK.png
這邊是HOMEPAGE按下加號後跳轉到選擇頁面,HOMEPAGE、TODAY、MONTH都各做了一個這個畫面~
https://ithelp.ithome.com.tw/upload/images/20210925/20140979joANeWAE56.png
按下上方XX後回到原本頁面。
https://ithelp.ithome.com.tw/upload/images/20210925/20140979sm1MBj8Q6j.png
這邊是從TODAY頁面跳轉到HOMEPAGE頁面。
https://ithelp.ithome.com.tw/upload/images/20210925/20140979pQsyCxXTCd.png
這邊是下排ICON跳轉到HOMEPAGE頁面的設定。
https://ithelp.ithome.com.tw/upload/images/20210925/201409797oZLJ6OfRC.png
這邊是LIST跳轉到個人資料頁面的設定。
https://ithelp.ithome.com.tw/upload/images/20210925/20140979WFp6QrZKkC.png
這邊是個人資料頁面跳轉回到HOMEPAGE頁面的設定。
https://ithelp.ithome.com.tw/upload/images/20210925/20140979BciMvXEQ9w.png
這邊是下在日記頁面開啟LIST的畫面設定。
https://ithelp.ithome.com.tw/upload/images/20210925/20140979nEgcHLDw6T.png
關閉日記LIST,回到日記頁面。
https://ithelp.ithome.com.tw/upload/images/20210925/20140979TC7Dsjn0ch.png
日記LIST按下主頁後一樣回到HOMEPAGE,但不會儲存日記或是儲存草稿。
https://ithelp.ithome.com.tw/upload/images/20210925/20140979IN3bJmZwrb.png
全部完成了!/images/emoticon/emoticon42.gif
有些頁面沒有截圖到~還請大家見諒/images/emoticon/emoticon46.gif

DEMO

這邊給大家看一下到目前為止的DEMO~
DEMO影片

謝謝大家的閱讀/images/emoticon/emoticon29.gif


上一篇
30天零負擔輕鬆學會製作APP介面及設計【DAY 15】
下一篇
30天零負擔輕鬆學會製作APP介面及設計【DAY 17】
系列文
30天零負擔輕鬆學會製作APP介面及設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言